<template>
  <div>
    <h2>Header</h2>
    <button @click="fn">触发当前组件实例上的自定义事abc</button>
    <button @click="$emit('aaa', 1, 2)">触发当前组件实例上的自定义事aaa</button>
    <!-- 
      组件实例上有一个$off方法,可以解绑当前组件上的自定义事件
      $off有三种写法: 
        1. $off没有接受任何参数,则代表解绑所有的自定义事件
        2. $off接受一个字符串,代表解绑某个自定义事件
        3. $off接受一个数组,代表解绑0个或多个自定义事件
     -->
    <button @click="$off(['aaa'])">在子组件中解绑自定义事件</button>
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    fn() {
      /* 
        组件实例上提供了 $emit 方法,专门用来触发自定义事件
        $emit()接受的第一个参数是 :调用的自定义事件名称
        $emit()接受的后边的参数,都是向父组件传递的数据,父组件中的事件函数使用参数分别接收
      */
      this.$emit("abc", "1", "2");
    },
  },
};
</script>

<style></style>
